<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


		<!-- 搜索栏 -->
<!--		 <view class="searchContentOut">
			<view class="searchContent">
				<input type="text" value="" class="searchInput" />
				<view class="searchBg">
					<image src="../../../static/gongzuotai/sousuo@2x.png" class="searchImg" mode=""></image>
				</view>
			</view>
		</view>-->
		<searchInput :inputcontent="inputcontent" @sendData="getInputValue"></searchInput>







		<!-- 筛选栏 -->
		<view class="searchPickerContent">

			<view class="searchPickerContentBg">
        <picker mode="date" :value="monthStart" :start="startDate" :end="endDate" @change="bindDateChange">
          <view class="uni-input">{{monthStart}}</view>
        </picker>
			</view>

			<view class="searchPickerContentBg">
        <picker mode="date" :value="monthEnd" :start="startDate" :end="endDate" @change="bindEndDateChange">
          <view class="uni-input">{{monthEnd}}</view>
        </picker>
			</view>

		</view>




		<!-- 选项卡 切换开始 -->
		<view class="SwitchTabOut">


			<view class="SwitchTabOutInner">
				<!-- 	选项卡开始 -->

				<view class="head-nav">
					<view :class="navIndex==0?'activite':''" @click="checkIndex(0)">
						<text>计件</text>

					</view>
					<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">
						<text>月薪</text>

					</view>
					<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">
						<text>计时</text>

					</view>


				</view>
				<!-- 选项卡结束 -->
				<!-- 底部下划线开始 -->
<!--				<view class="head-nav-line">
					<view class="head-nav-line1" @click="checkIndex(0)">
						<text :class="navIndex==0?'line':''"></text>

					</view>
					<view class="head-nav-line1" @click="checkIndex(1)">
						<text :class="navIndex==1?'line':''"></text>

					</view>
					<view class="head-nav-line1" @click="checkIndex(2)">
						<text :class="navIndex==2?'line':''"></text>

					</view>


				</view>-->
				<!-- 底部下划线结束 -->



				<!-- 计件开始 -->
        <view class="contentCountTimeNew">
          <view class="contentCenterInnerListItemContent2">
				    <view class="contentCountTime" v-if="navIndex==0">
					<!-- 列表标题 -->
					<view class="titleStyle">
						<text class="titleStyleNum">序号</text>
						<text class="titleStyleNum">姓名</text>
						<text class="titleStyleNum">订单</text>
						<text class="titleStyleNum">款式</text>
						<text class="titleStyleNum">扎号</text>
						<text class="titleStyleNum">颜色</text>
						<text class="titleStyleNum">尺码</text>
						<text class="titleStyleNum">数量</text>
						<text class="titleStyleNum">工序</text>
						<text class="titleStyleNum">价格</text>
						<text class="titleStyleNum">总额</text>
						<text class="titleStyleNum">时间</text>
					</view>
					<scroll-view scroll-y="true" class="titleStyleTitle" @scrolltolower="scrolltolowerClick">
						<!-- 列表内容 -->
						<view v-for="(item,index) in jjListData" >
							<view class="titleStyleList" v-if="index%2==0">
								<text class="titleStyleNameList">{{item.num}}</text>
								<text class="titleStyleNameList">{{item.userName}}</text>
								<text class="titleStyleNameList">{{item.orderCode}}</text>
								<text class="titleStyleNameList">{{item.styleName}}</text>
								<text class="titleStyleNameList">{{item.bundleCode}}</text>
								<text class="titleStyleNameList">{{item.colors}}</text>
								<text class="titleStyleNameList">{{item.sizes}}</text>
								<text class="titleStyleNameList">{{item.quantity}}</text>
								<text class="titleStyleNameList">{{item.processName}}</text>
								<text class="titleStyleNameList">{{item.processPrice}}</text>
								<text class="titleStyleNameList">{{item.amounts}}</text>
								<text class="titleStyleNameList">{{item.createTime}}</text>
							</view>
							<view class="titleStyleListElse" v-if="index%2!=0">
								<text class="titleStyleNameList">{{item.num}}</text>
                <text class="titleStyleNameList">{{item.userName}}</text>
                <text class="titleStyleNameList">{{item.orderCode}}</text>
                <text class="titleStyleNameList">{{item.styleName}}</text>
                <text class="titleStyleNameList">{{item.bundleCode}}</text>
                <text class="titleStyleNameList">{{item.colors}}</text>
                <text class="titleStyleNameList">{{item.sizes}}</text>
                <text class="titleStyleNameList">{{item.quantity}}</text>
                <text class="titleStyleNameList">{{item.processName}}</text>
                <text class="titleStyleNameList">{{item.processPrice}}</text>
                <text class="titleStyleNameList">{{item.amounts}}</text>
                <text class="titleStyleNameList">{{item.createTime}}</text>
							</view>
						</view>

					</scroll-view>

				</view>
          </view>
        </view>
				<!-- 计件结束 -->
        <!-- 月薪开始 -->
        <view class="contentCountTime" v-if="navIndex==1">
          <!-- 列表标题 -->
          <view class="titleStyle">
            <text class="titleStyleNum">序号</text>
            <text class="titleStyleSerial">工号</text>
            <text class="titleStyleSerial">姓名</text>
            <text class="titleStyleSerial">金额</text>
          </view>
          <scroll-view scroll-y="true" class="titleStyleTitle" @scrolltolower="scrolltolowerClick">
            <!-- 列表内容 -->
            <view v-for="(item,index) in yxListData" @click="listItemClick(item)">
              <view class="titleStyleList" v-if="index%2==0">
                <text class="titleStyleNumList">{{item.num}}</text>
                <text class="titleStyleSerialList">{{item.userName}}</text>
                <text class="titleStyleNameList">{{item.nickName}}</text>
                <text class="titleStyleNameList">{{item.amounts}}</text>
              </view>
              <view class="titleStyleListElse" v-if="index%2!=0">
                <text class="titleStyleNumList">{{item.num}}</text>
                <text class="titleStyleSerialList">{{item.userName}}</text>
                <text class="titleStyleNameList">{{item.nickName}}</text>
                <text class="titleStyleNameList">{{item.amounts}}</text>
              </view>
            </view>

          </scroll-view>

        </view>
        <!-- 月薪结束 -->
        <!-- 计时开始 -->
        <view class="contentCountTime" v-if="navIndex==2">
          <!-- 列表标题 -->
          <view class="titleStyle">
            <text class="titleStyleNum">序号</text>
            <text class="titleStyleSerial">工号</text>
            <text class="titleStyleSerial">姓名</text>
            <text class="titleStyleSerial">金额</text>
          </view>
          <scroll-view scroll-y="true" class="titleStyleTitle" @scrolltolower="scrolltolowerClick">
            <!-- 列表内容 -->
            <view v-for="(item,index) in jsListData" @click="listItemClick(item)">
              <view class="titleStyleList" v-if="index%2==0">
                <text class="titleStyleNumList">{{item.num}}</text>
                <text class="titleStyleSerialList">{{item.userName}}</text>
                <text class="titleStyleNameList">{{item.nickName}}</text>
                <text class="titleStyleNameList">{{item.amounts}}</text>
              </view>
              <view class="titleStyleListElse" v-if="index%2!=0">
                <text class="titleStyleNumList">{{item.num}}</text>
                <text class="titleStyleSerialList">{{item.userName}}</text>
                <text class="titleStyleNameList">{{item.nickName}}</text>
                <text class="titleStyleNameList">{{item.amounts}}</text>
              </view>
            </view>

          </scroll-view>

        </view>
        <!-- 计时结束 -->
			</view>

		</view>
		<!-- 选项卡 切换结束 -->






	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import searchInput from '@/components/searchInput.vue'


	import {
    userSalaryByPieceworks,getOrderRegisterPage
	} from '@/pages/api/api.js'


	export default {
		components: {
			MyNav,
			bgImage,
			searchInput
		},

		data() {
      const currentDate = this.getDate({
        format: true
      })
			return {
				title: '薪资明细',
				isback: true,
				inputcontent: '请输入订单/款式',

				// 切换选项卡
				isActive: true,
				textColor: '#0081FF',

				navIndex: 0,

				jjListData: [],
				yxListData: [],
				jsListData: [],

				listSizeData: [],


				sizeManagerData: {
					storeId: '',
					tenantId: '',
					pageNum: '1', // 当前页
					pageSize: '50', //页码大小
					userId:''
				},
        monthStart: this.getFirstDayOfMonth(),
        monthEnd: this.getLastDayOfMonth(),
			}
		},
    computed: {
      startDate() {
        return this.getDate('start');
      },
      endDate() {
        return this.getDate('end');
      }
    },
		onLoad:function (option) {
      console.log('option',option)
      let data = JSON.parse(decodeURIComponent(option.data));
      console.log('data',data)
      this.sizeManagerData.userId = data.userId
      this.monthStart = data.monthStart
      this.monthEnd = data.monthEnd
      const app = getApp();
      this.sizeManagerData.storeId = app.globalData.storeId
      this.sizeManagerData.tenantId = app.globalData.tenantId
			this.loadData()
		},

		methods: {
			// 重置数据
			reUpload() {
				// 重置数据
				this.jjListData = []
				// 表示自动刷新本页
				this.loadData()
			},

			// 加载数据
			loadData() {

				const app = getApp();
				this.sizeManagerData.storeId = app.globalData.storeId
				this.sizeManagerData.tenantId = app.globalData.tenantId
        this.sizeManagerData.createTimeStart = this.monthStart
        this.sizeManagerData.createTimeEnd = this.monthEnd
				// 重置
				this.sizeManagerData.pageNum = 1;

        getOrderRegisterPage(this.sizeManagerData).then((res) => {
					if (res.code == 200) {
						this.totalPage = (res.total / this.sizeManagerData.pageSize)
						if (this.totalPage > 1) {
							++this.totalPage
						}
						// 计算总页数
						this.totalPage = parseInt(this.totalPage)
						// this.listSizeData = this.listSizeData.concat(res.rows)
						this.jjListData = [...this.jjListData, ...res.rows]

						//获取数据的时候foreach循环一下，添加show=false
						this.jjListData.forEach((item, index) => {
							this.$set(item, 'num', index + 1)
              this.$set(item, 'amounts', item.quantity * item.processPrice)
						})
					}
					console.log('2211获取数据成功', res, this.totalPage, this.jjListData.length);
				}).catch((err) => {
					// console.error('11获取数据失败', err);
				});
			},

			// 滚动条滚动底部
			scrolltolowerClick(e) {
				if (this.totalPage > this.sizeManagerData.pageNum) {
					++this.sizeManagerData.pageNum
          userSalaryByPieceworks(this.sizeManagerData).then((res) => {
						// console.log('11获取数据成功', res);
						// console.log('221滚动条触底', res.code, (res.code == 200));
						if (res.code == 200) {
							// 列表累计
							this.jjListData = [...this.jjListData, ...res.rows]
							//获取数据的时候foreach循环一下，添加num
							this.jjListData.forEach((item, index) => {
								this.$set(item, 'num', index + 1)
								this.$set(item, 'amounts', item.quantity * item.processPrice)
							})
            }
					}).catch((err) => {
						// console.error('11获取数据失败', err);
					});
				} else {
					uni.showToast({
						title: '已加载完全部数据',
						icon: 'none'
					});
				}
			},


			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},
			// 获取输入框的值
			getInputValue(e) {
				console.log('获取输入框的值', e);
        this.sizeManagerData.queryCom = e;
        this.jjListData=[]
        this.loadData()
			},
      bindDateChange: function(e) {
        this.monthStart = e.detail.value
        this.sizeManagerData.createTimeStart = this.monthStart
        if(this.monthEnd!=undefined ||this.monthEnd!=null||this.monthEnd!=''){
          this.jjListData=[]
          this.loadData()
        }
      },
      bindEndDateChange: function(e) {
        this.monthEnd= e.detail.value
        this.sizeManagerData.createTimeEnd = this.monthEnd
        if(this.monthStart!=undefined ||this.monthStart!=null||this.monthStart!=''){
          this.jjListData=[]
          this.loadData()
        }
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          month = month + 1;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
      getFirstDayOfMonth() {
        let date = new Date();
        date.setDate(1);
        return date.toISOString().slice(0, 10);
      },
      getLastDayOfMonth() {
        let date = new Date();
        date.setDate(1);
        return new Date().toISOString().slice(0, 10);
      }
		}
	}
</script>

<style>
	.titleStyleNumList {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #333333;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleSerialList {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #333333;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleNameList {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 200rpx;
    height: 100%;
    font-size: 24rpx;
    color: #333333;

    text-align: left;
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
	}

	.titleStyleNum {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 200rpx;
    height: 100%;
    font-size: 24rpx;
    color: #FFFFFF;

    text-align: center;
    font-style: normal;
    text-transform: none;

    white-space: nowrap;
	}

	.titleStyleSerial {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #FFFFFF;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleName {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #FFFFFF;


		font-style: normal;



	}

	.line {
		width: 690rpx;
		height: 1rpx;
		background: #F9FCFF;



	}

	.titleStyleTitle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 560rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 30rpx 30rpx;


	}

	.titleStyleListElse {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 100%;
		height: 80rpx;
		background: #F9FCFF;
	}

	.titleStyleList {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		width: 100%;
		height: 80rpx;

	}

	.titleStyle {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 80rpx;
    background: #0081FF;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    margin-top: 42rpx
	}
	.contentCountTime {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
	}
  .contentCountTimeNew {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;

    white-space: nowrap;

    overflow-x: auto;
    display: -webkit-box;
    overflow-y: hidden;
  }
  .contentCenterInnerListItemContent2 {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

	.line {
		margin-top: 24rpx;
		width: 60rpx;
		height: 4rpx;
		background: #0081FF;
		border-radius: 2rpx;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.activite {
		color: #0081FF;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;




	}

	.head-nav {

		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #CCCCCC;
		width: 100%;

	}

	.head-nav-line {

		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		color: #CCCCCC;
		width: 100%;



	}

	.head-nav-line1 {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		color: #CCCCCC;
		width: 100%;



	}

	.SwitchTabOutInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 690rpx;
		/* background: #FFFFFF; */
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.SwitchTabOut {

		display: flex;
		justify-content: center;
		align-items: center;

		/* background: #FFFFFF; */
		border-radius: 30rpx;

		margin-top: 30rpx;

	}


	.searchPickerText {

		margin-left: 20rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;

	}

	.searchPickerImg {
		width: 20rpx;
		height: 10rpx;
		margin-right: 20rpx;

	}

	.searchPickerContentBg {
		width: 330rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-right: 15rpx;
		margin-left: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;


	}

	.searchPickerContent {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		margin-top: 30rpx;




	}
</style>
